<template>
  <div class="maintenance-plan full-height page-content bg-white content">
    <q-tabs
      v-model="tab"
      narrow-indicator
      inline-label
      dense
      align="left"
      indicator-color="primary"
      active-color="primary"
      style="padding: 10px 4px 0"
      class="tab-label"
    >
      <q-tab name="planList"  icon="iconfont icontubiao4-76" label="计划列表" />
      <q-tab name="maintenanceCalendar"  icon="iconfont icontubiao-94" label="保养日历" />
    </q-tabs>
    <q-separator />
    <q-tab-panels v-model="tab" keep-alive animated class="full-height no-padding" style="border-radius: 6px">
      <q-tab-panel name="planList" class="no-padding">
        <planList ref="planList"/>
      </q-tab-panel>
      <q-tab-panel name="maintenanceCalendar" class="no-padding">
        <maintenanceCalendar ref="maintenanceCalendar"/>
      </q-tab-panel>
    </q-tab-panels>
  </div>
</template>

<script>
import planList from './maintenance-plan/plan-list'
import maintenanceCalendar from './maintenance-plan/maintenance-calendar'
import _ from 'lodash'
export default {
  name: 'maintenance-plan',
  components: {
    planList,
    maintenanceCalendar
  },
  data () {
    return {
      tab: 'planList' // 选中的 tab
    }
  },
  beforeRouteEnter (to, from, next) {
    to.name === 'maintenancePlan' && next(vm => {
      if (to.params.showList) {
        vm.tab = 'planList'
        !_.isEmpty(to.params.order) && vm.$refs.planList.changeSelectVal(to.params.order)
      } else {
        vm.$refs[vm.tab].getList()
      }
    })
  },
  mounted () {},
  methods: {}
}
</script>
<style scoped lang="scss">
</style>
